<template>
	<div class="brand-container" :class="isShow ? '' : 'hidden'">
	    <div class="tab-pan-tags mb10">
	    	<el-tag 
	    		class="tab-pan-tag"
	    		v-for="(tag,key,$index) in tags"
				:key="key"
	    		:closable="tag.closable"
	    		:type="tag.isCurent ? 'success' : ''"
	    		@click.native="toggleTag($event,$index)"
	    		@close="closeTag(tag)"
    		>
	    		<i v-if="tag.icon" :class="'el-icon-' + tag.icon"></i>
	    		{{tag.name}}
	    	</el-tag>
	    	
	    	<el-dropdown class="tags-opra" size="medium"  type="">
		    	<span class="el-dropdown-link">
				    标签选项<i class="el-icon-arrow-down el-icon--right"></i>
			  	</span>
			  	<el-dropdown-menu slot="dropdown">
				    <el-dropdown-item>关闭所有</el-dropdown-item>
				    <el-dropdown-item>关闭其他</el-dropdown-item>
			  	</el-dropdown-menu>
			</el-dropdown>
	    	
	    </div>
	    <div class="tab-content">
    		<el-row>
	    		<el-form :inline="true"  class="demo-form-inline" @submit.native.prevent>
				  	<el-form-item 
				  		v-for="(item,key) in formData"
				  		:key="key"
				  		:label="item.label">
				  		<template v-if="item.type == 'text'">
				  			<el-input v-model="item.value" :placeholder="item.palceholder" size="small"></el-input>
				  		</template>
				    	<template v-if="item.type == 'button'">
				  			<el-button type="primary" :icon="'el-icon-' + item.icon" size="small">{{item.value}}</el-button>
					  	</template>
				  	</el-form-item>
				    	
				</el-form> 
	    	</el-row>
		    	
			<el-row class="btns mb20">
				<el-button 
					v-for="(btn,key) in btnsData"
					:key="key"
					size="small"
				 	@click="btn.callback"
				 	>
				 	{{btn.value}}
				</el-button>
			</el-row>
	    	<el-row class="mb20">
	    		<el-table
				    ref="multipleTable"
				    border
				    :data="tabData.tds"
				    tooltip-effect="dark"
				    style="width: 100%"
				    max-height="450"
				    @selection-change="handleSelectionChange">
			    	<el-table-column
				    	type="selection"
				      	width="55">
				    </el-table-column>
				    <el-table-column
				    	v-for="(th,key) in tabData.ths"
						:key="key"
			    		v-if="th.type !== 'selection' && !th.hasTpl"
				      	:label="th.label"
				      	:prop="th.prop"
				      	:sortable="th.sortable"
				      	>
				    </el-table-column>
				    <el-table-column
				    	v-for="(th,key) in tabData.ths"
						:key="key"
				    	v-if="th.fixed"
				    	:width="th.width"
				    	:label="th.label"
				    	:fixed="th.fixed "
				      	show-overflow-tooltip>
				      	<template slot-scope="scope">
				      		<el-tag 
				      			class="tag-btn tag-btn-success"
			      			 	type="success"
			      			  	size="small"
			      			  	title="编辑"
			      			  	@click.native="itemEdit(scope.$index)"
		      			  	>
			      			  	<i class="el-icon-edit"></i>
				      		</el-tag>
                  <el-tag 
				      			class="tag-btn 
				      			tag-btn-danger" 
				      			type="danger" 
				      			size="small"
				      			title="删除"
				      			@click.native="itemForbidden(scope.$index)"
			      			>
			      				<i class="el-icon-delete"></i>
				      		</el-tag>
				      		<el-tag 
				      			class="tag-btn 
				      			tag-btn-warning" 
				      			type="warning" 
				      			size="small"
				      			title="查看"
				      			@click.native="itemForbidden(scope.$index)"
			      			>
			      				<i class="el-icon-document"></i>
				      		</el-tag>
				      	</template>
				    </el-table-column>
					    
				    
			  	</el-table>
	    	</el-row>
	    	
	    	<div class="pagination-wrap">
			    <el-pagination
			    	background
			      	@size-change="handleSizeChange"
			      	@current-change="handleCurrentChange"
			      	:current-page="currentPage"
			      	:page-sizes="[10, 20, 30, 40]"
			      	:page-size="10"
			      	layout="total, sizes, prev, pager, next, jumper"
			      	:total="40">
			    </el-pagination>
		  	</div>
    	</div>
	    
  	</div>
</template>

<script>
export default {
  name: 'site',
  data() {
    return {
      // 是否展示
      isShow: true,
      // 标签数据
      tags: [
        {
          name: '站点管理',
          icon: 'date',
          isCurent: true,
          closable: true
        }
      ],
      // 表单数据
      formData: [
        {
          label: '品牌名称',
          type: 'text',
          value: '',
          placeholder: '请输入品牌名称关键字'
        },
        {
          label: '',
          type: 'button',
          icon: 'search',
          value: '查询'
        }
      ],
      // 操作按钮数据
      btnsData: [
        {
          value: '导入',
          callback: this.importFile
        },
        {
          value: '导出',
          callback: this.exportFile
        },
        {
          value: '新增',
          callback: this.addItem
        },
        {
          value: '禁用',
          callback: this.forbiddenAll
        }
      ],
      // 表格数据
      tabData: {
        tabHeight: 350,
        ths: [
          {
            type: 'selection',
            width: 55,
            label: '',
            prop: ''
          },
          {
            type: '',
            width: 120,
            label: '所属顶级机构',
            prop: 'code'
          },
          {
            type: '',
            width: 120,
            label: '所属机构',
            prop: 'name'
          },
          {
            type: '',
            width: 120,
            label: '站点名称',
            prop: 'name'
          },
          {
            type: '',
            width: 120,
            label: '站点编码',
            prop: 'name'
          },
          {
            type: '',
            width: 150,
            label: '操作',
            prop: '',
            fixed: 'right',
            showTip: true,
            hasTpl: true
          }
        ],
        tds: [
          {
            code: '10',
            name: '杭州福特',
            oparation: ''
          },
          {
            code: '10',
            name: '杭州福特',
            oparation: ''
          },
          {
            code: '10',
            name: '杭州福特',
            oparation: ''
          },
          {
            code: '10',
            name: '杭州福特',
            oparation: ''
          },
          {
            code: '10',
            name: '杭州福特',
            oparation: ''
          }
        ]
      },
      // 选取表格数据
      multipleSelection: [],

      // 分页数据

      currentPage: 4,
      pageSizes: [10, 20, 30, 40],
      pageSize: 10,
      total: 40
    }
  },

  computed: {},

  methods: {
    // tag切换回调
    toggleTag(e, index) {
      console.log(index)
      const tags = this.tags
      if (tags[index].isCurent) {
        return
      } else {
        tags.forEach(tag => {
          tag.isCurent = false
        })
        tags[index].isCurent = true
      }
      this.tags = tags
    },
    // tag关闭回调
    closeTag(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)

      // 关闭tag后，同时要路由跳转
      // this.$router.
    },

    // tag关闭回调
    tagClose() {},

    // 条件查询
    search() {},

    // 导入Excel文件
    importFile() {
      console.log('import')
    },
    // 导出Excel文件
    exportFile() {
      console.log('export')
    },
    // 增加条目
    addItem() {
      console.log('add')
    },
    // 禁用所有条目
    forbiddenAll() {
      console.log('forbidden')
    },

    // 表格条目操作
    itemEdit(index) {
      console.log('itemEdit' + index)
    },
    itemForbidden(index) {
      console.log('itemForbidden' + index)
    },

    // 表格变化
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(val)
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.brand {
  &-container {
    margin: 30px;
    &.hidden {
      display: none;
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.mb10 {
  margin-bottom: 10px;
}
.mb20 {
  margin-bottom: 20px;
}
.tab-pan-tags {
  position: relative;
  padding: 10px;
  background-color: #fff;
  cursor: pointer;
  .tab-pan-tag {
    margin-right: 10px;
  }
  .tags-opra {
    float: right;
    margin-top: 10px;
  }
}

.tag-btn {
  cursor: pointer;
  &-success:hover {
    background-color: #67c23a;
    color: #fff;
  }
  &-warning:hover {
    background-color: #e6a23c;
    color: #fff;
  }
  &-danger:hover {
    background-color: #f56c6c;
    color: #fff;
  }
}
.pagination-wrap {
}
</style>